<template>
    <div>

        <div class="container" style="justify-content: space-between;min-height: 800px;">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="24">
                    <div class="content-show">
                        <div class="handle-box" style="margin:10px 10px;">
                            <!--                        <el-button type="success" @click="seach" plain>查询</el-button>-->
                            <!--<el-button type="success" @click="seachEquiment" plain>高级查询</el-button>-->
                            <el-button type="primary" @click="addEquiment">新增</el-button>
                            <!--<el-button type="success" @click="editEquiment">修改</el-button>-->
                            <!--<el-button @click="editEquimentAll">批量修改</el-button>-->
                            <!--<el-button type="warning" @click="enable">启用</el-button>-->
                            <!--<el-button type="info" @click="disEnable">禁用</el-button>-->
                            <!--<el-button type="danger" @click="deleteAble">删除</el-button>-->
                            <!--<el-button type="primary" @click="configMid">配置中继链路</el-button>-->
                            <!--<el-button type="danger" @click="configMid('-1')">解除中继链路</el-button>-->
                            <!--<el-button type="danger" @click="bindapp">绑定APP</el-button>-->
                        </div>
                        <el-table
                                :data="tableData"
                                border
                                expand-on-click-node
                                stripe class="table"
                                @selection-change="handleSelectionChange"
                                ref="multipleTable"
                                style="width: 100%">
                            <el-table-column type="selection" width="55" align="center"></el-table-column>
                            <el-table-column
                                    prop="deviceTypeName"
                                    label="名称"
                                    align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="deviceName"
                                    label="寄存器类型"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="deviceCode"
                                    label="寄存器地址"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="deviceUsingState"
                                    label="寄存器个数"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="concentratorName"
                                    label="标识符"
                                    align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="repeaterInfo"
                                    label="显示类型"
                                    align="center"
                            >
                            </el-table-column>
                            <el-table-column label="操作"  align="center">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size">
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--新增-->
        <el-dialog :title="diologTitle" :close-on-click-modal="$modelGolbParam.closeOnClickModal"
                   :close-on-press-escape="$modelGolbParam.closeOnPressEscape" :visible.sync="addVisible" width="70%">
            <div style="height:auto;overflow: auto;">
                <el-form :model="form"  ref="Form" label-width="120px" class="limit-small" :rules="rules">
                    <el-form-item label="名称" class="limit-width active" prop="code">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item >
                    <el-form-item label="寄存器类型" class="limit-width active" prop="concentrator">
                        <el-select v-model="form.type"  placeholder="请选择" >
                            <el-option
                                    v-for="item in selectConcentrator"
                                    :key="item.deviceId"
                                    :label="item.deviceName"
                                    :value="parseInt(item.deviceId)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="寄存器地址" class="limit-width active" prop="address">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item >
                    <el-form-item label="寄存器个数" class="limit-width active" prop="address">
                        <el-input v-model="form.count"></el-input>
                    </el-form-item >
                    <el-form-item label="数据单位" class="limit-width active" prop="address">
                        <el-input v-model="form.unit"></el-input>
                    </el-form-item >
                    <el-form-item label="数据类型" class="limit-width active" prop="concentrator">
                        <el-select v-model="form.dataType"  placeholder="请选择" >
                            <el-option
                                    v-for="item in dataConcentrator"
                                    :key="item.deviceId"
                                    :label="item.deviceName"
                                    :value="parseInt(item.deviceId)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <!--删除-->
        <el-dialog :title="diologTitle" :close-on-click-modal="$modelGolbParam.closeOnClickModal"
                   :close-on-press-escape="$modelGolbParam.closeOnPressEscape" :visible.sync="dieleteVisible" width="20%" >
            <span>确定删除当前信息吗？</span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dieleteVisible = false">取 消</el-button>
            <el-button type="primary" @click="getDelete()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { regionalRoot,getSubOrgList,getDeviceTypeList,searchAll,addDevice,getAllCollector,getCategory,getGroupList,dynamicSerachDeviceInfo,deleteDevice,getRepeaterLinkList,updateDevice,batchDevices,getDeviceTypeDataConfig,getDeviceTypeDataConfigByDeviceId,getBaseEnergyTypeListNews,getEnergyConcretTypeByEnergyBaseTypeId,getDeviceDataParaByDeviceTypeId,BatchUpdateSameTypeDevice} from '../../../api/index';
    import {regNumber,regNumStr} from '../../common/com'
    export default {
        name: "EquipmentManagement",
        data() {
            return {
                cur_page: 1,
                page_size: 100,
                page_total: 1,
                selectType: [],//获取设备类型的下拉
                selectConcentrator: [
                    {deviceName:'保存寄存器(0x04)',deviceId:'1'},
                    {deviceName:'输入寄存器(0x03)',deviceId:'2'}
                ],//获取网关下拉1
                dataConcentrator:[
                    {deviceName:'输入框',deviceId:'1'},
                    {deviceName:'开关',deviceId:'2'}
                ],
                tableData: [],//列表数据
                addVisible: false,//新增
                isEditInfo: false,//修改
                dieleteVisible:false,//删除
                diologTitle: '新增模板',
                form: {
                    name: '',//设备名称
                    type:'',
                    count:'',
                    address:'',
                    unit:'',
                    dataType:''
                },
                multipleSelection: [],//当前行
                rules:{},
                isConfigMid:false,
                configMidDataList: [],
                configMidData: '',
            }

        },

        created() {
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                this.seach();//点击分页获取数据
            },
            //选中行
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //点击保存
            save(){
                console.log(this.form)
            },
            //删除接口调用
            getDelete(){
            },
            //新增弹出框
            addEquiment(){
                this.addVisible = true;
            },
            //修改弹窗
            handleEdit() {

            },
            //删除弹窗
            handleDelete(){
                this.dieleteVisible = true;
            }
        }
    }
</script>

<style scoped>
    /deep/ .el-form-item__content{
        margin-left: 0 !important;
    }

    /deep/ .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label{
        line-height: 0px;
    }
    .handle-box {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .el-dialog{
        max-height:600px;
        overflow-y: scroll;
    }

    .el-select{
        width:60%;
    }
    .el-input{
        width:60%;
    }
    /*.limit-small .el-form-item{*/
    /*    float: left;*/
    /*    width: 50%;*/
    /*}*/
    .limit-small{
        overflow: hidden;
    }
    /*.limit-width{*/
    /*    width: 50%;*/
    /*    float: left;*/
    /*}*/
    .active{
        width: 50%;
        float: left;
    }
    /*.el-input{*/
    /*    width: 80%;*/
    /*}*/
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }
    .el-form-item::after, .el-form-item::before {
        clear: both;
    }
    /deep/ .no-border-input input.el-input__inner{
        border: 0;
        padding:0;

    }
    /deep/ .no-border-input {
        width: 100%;

    }
</style>
